<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head th:include="public/page_css::page_css ('修改客户档案')">
    <meta charset="UTF-8"/>
    <title>Title</title>
    <!-- load css -->

    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/font/iconfont.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" media="all"/>
    <style>
        .layui-form-label {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>

<body>
<div class="layui-fluid larry-wrapper">
    <div class="layui-row layui-col-space30">
        <div class="layui-col-xs24">
            <section class="panel panel-padding">
         <!--       <form id="form1" class="layui-form layui-form-pane" action="">
                    &nbsp;
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label"><font color="red"
                                                                  style="margin-right:10px">*</font>客户编号</label>
                            <div class="layui-input-block">
                                <input type="text" name="khbh" required="required" jq-verify="required"
                                       jq-error="请输入客户编号" lay-verify="required" placeholder="请输入客户编号" autocomplete="off"
                                       class="layui-input "/>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label"><font color="red"
                                                                  style="margin-right:10px">*</font>客户名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="khmc" required="required" jq-verify="required"
                                       jq-error="请输入客户名称" lay-verify="required" placeholder="请输入客户名称" autocomplete="off"
                                       class="layui-input "/>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label"><font color="red"
                                                                  style="margin-right:10px">*</font>客户类型</label>
                            <div class="layui-input-block">
                                <select name="khlx">
                                    <option value="0">收货人</option>
                                </select>
                            </div>

                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label"><font color="red"
                                                                  style="margin-right:10px">*</font>省份</label>
                            <div class="layui-input-block">

                                <select name="sheng" id="sheng" lay-verify="required" lay-filter="sheng" lay-search>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">

                            <label class="layui-form-label"><font color="red"
                                                                  style="margin-right:10px">*</font>城市</label>
                            <div class="layui-input-block">
                                <select id="shi" name="shi" lay-verify="required" lay-search>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label"><font color="red"
                                                                  style="margin-right:10px">*</font>路线</label>
                            <div class="layui-input-inline">

                                <select lay-ignore="lay-ignore" name="selectId" id="selectId" select2
                                        style="width: 193px"></select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>详细地址</label>
                                <div class="layui-input-block">
                                    <input type="text" name="dz" required="required" jq-verify="required"
                                           jq-error="请输入详细地址"
                                           lay-verify="required" placeholder="请输入详细地址" autocomplete="off"
                                           class="layui-input "/>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label"><font color="red"
                                                                      style="margin-right:10px">*</font>联系人姓名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="lxrxm" required="required" jq-verify="required"
                                           jq-error="请输入联系人姓名"
                                           lay-verify="required" placeholder="请输入联系人姓名" autocomplete="off"
                                           class="layui-input "/>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>联系电话</label>
                                <div class="layui-input-block">
                                    <input type="text" name="lxrdh" required="required" jq-verify="required"
                                           jq-error="请输入联系人电话"
                                           lay-verify="required" placeholder="请输入联系人电话" autocomplete="off"
                                           class="layui-input "/>
                                </div>
                            </div>
                        </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>客户等级</label>
                                <div class="layui-input-block">
                                    <input type="text" name="khdj" required="required" jq-verify="required"
                                           jq-error="请输入客户等级"
                                           lay-verify="required|phone" placeholder="客户等级" autocomplete="off"
                                           class="layui-input "/>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" jq-filter="submit" lay-submit=""
                                            lay-filter="editCustomer">立即提交
                                    </button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                            <input type="hidden" th:value="${id}" id="id" name="id">
                </form>-->

                <form id="form1" class="layui-form layui-form-pane" action="">
                    &nbsp;
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">货主名称</label>
                            <div class="layui-input-inline">

                                <input type="text" th:value="${hzmc}"  readonly  class="layui-input " style="background-color: #f2f2f2;"/>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>客户编号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="khbh" required="required" jq-verify="required"
                                       jq-error="请输入客户编号" lay-verify="required" placeholder="请输入客户编号" autocomplete="off"
                                       class="layui-input "/>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label"><font color="red"
                                                                  style="margin-right:10px">*</font>客户名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="khmc" required="required" jq-verify="required" readonly
                                       jq-error="请输入客户名称" lay-verify="required" placeholder="请输入客户名称" autocomplete="off"
                                       class="layui-input " style="background-color: #f2f2f2;"/>
                            </div>
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label"><font color="red"
                                                                  style="margin-right:10px">*</font>客户类型</label>
                            <div class="layui-input-inline">
                                <select name="khlx" id="khlx">
                                    <option value="0">收货人</option>
                                    <option value="1">承运人</option>
                                    <option value="2">仓库</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label"><font color="red"
                                                                  style="margin-right:10px">*</font>省份</label>
                            <div class="layui-input-inline">
                                <select name="sheng" id="sheng" lay-verify="required" lay-filter="sheng">

                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label"><font color="red"
                                                                  style="margin-right:10px">*</font>城市</label>
                            <div class="layui-input-inline">
                                <select name="shi" id="shi" lay-verify="required">
                                </select>
                            </div>
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label"><font color="red"
                                                                  style="margin-right:10px">*</font>路线</label>
                            <div class="layui-input-inline">
                                <select lay-ignore="lay-ignore" data-required="data-required"
                                        class="js-data-example-ajax" name="selectId" id="selectId" select2 onchange="getLxid()"
                                        style="width: 193px">
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label"><font color="red"
                                                                  style="margin-right:10px">*</font>详细地址</label>
                            <div class="layui-input-inline">
                                <input type="text" name="dz" required="required" jq-verify="required" jq-error="请输入详细地址"
                                       lay-verify="required" placeholder="请输入详细地址" autocomplete="off"
                                       class="layui-input "/>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" title="联系人姓名"><font color="red"
                                                                  style="margin-right:10px">*</font>联系人姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="lxrxm" required="required" jq-verify="required"
                                       jq-error="请输入联系人姓名"
                                       lay-verify="required" placeholder="请输入联系人姓名" autocomplete="off"
                                       class="layui-input "/>
                            </div>
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label"><font color="red"
                                                                  style="margin-right:10px">*</font>联系电话</label>
                            <div class="layui-input-inline">
                                <input type="text" name="lxrdh" required="required" jq-verify="required"
                                       jq-error="请输入联系人电话"
                                       lay-verify="required|phone|number"  placeholder="请输入联系人电话" autocomplete="off"
                                       class="layui-input "/>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label"><font color="red"
                                                                  style="margin-right:10px">*</font>客户等级</label>
                            <div class="layui-input-inline">
                                <input type="text" name="khdj" required="required" jq-verify="required"
                                       jq-error="请输入客户等级"
                                       lay-verify="required|number" placeholder="客户等级" autocomplete="off"
                                       class="layui-input "/>
                            </div>
                        </div>
                    </div>
                       <input type="hidden" name="lxid" id="lxid">
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" jq-filter="submit" lay-submit="" lay-filter="editCustomer">立即提交
                            </button>
                         <!--   <button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
                        </div>
                    </div>
                    <input type="hidden" th:value="${id}" id="id" name="id">
                </form>
            </section>
        </div>
    </div>
</div>
</body>
<div th:include="public/public_js::public_js"></div>

<script>
    $(function () {
        var str = "<option>==请选择===</option>";
        $.ajax({
            type: "GET",
            url: "/zxsswms/wmscityinfo/selectProvice/1",
            dataType: "JSON",
            async: false,
            success: function (data) {
                console.info(data);
                //从服务器获取数据进行绑定
                $.each(data, function (i, item) {
                    console.info("item.cityname" + item.cityname);
                    console.info(item.citycode);
                    str += "<option value=" + item.cityname + " code=" + item.citycode + ">" + item.cityname + "</option>";
                })
                //将数据添加到省份这个下拉框里面
                $("#sheng").append(str);

            },
            error: function () {
                alert("Error");
            }
        });
        //加载城市
    });

    layui.use(['form', 'zzpUtils'], function () {
        var form = layui.form,
            zzpUtils = layui.zzpUtils;
       /* zzpUtils.select2({
            elem: "#selectId",  //dom
            url: "/wmsCustomerFiles/baseSelectLine" //路径
        });*/
        //select2 查路线
        $('#selectId').select2({
            ajax: {
                url: "/zxsswms/wmsCustomerFiles/baseSelectLine",//路径
                dataType: 'json',
                type: 'POST',
                contentType: "application/json",
                data: function (params) {
                    var query = {
                        mc: params.term
                    };
                    return JSON.stringify(query);
                },
                processResults: function (data) {
                    var arr = new Array();
                    if (data) {
                        for (var i = 0; i < data.length; i++) {
                            arr.push({id: data[i].id, text: data[i].xlmc});
                        }
                    }
                    console.log(arr);
                    return {
                        results: arr
                    };
                },
                cache: true
            },
            language: "zh-CN",
            placeholder: '请输入查询货品种类',
            allowClear: true
        });
        window.getLxid=function () {
            $("#lxid").val($("#selectId").val());
        }


        zzpUtils.select({
            elem: "#sheng",
            url: "/wmscityinfo/selectProvice/1"
        });
        zzpUtils.action({
            url: "/wmsCustomerFiles/findOne",
            data: JSON.stringify({id: $("#id").val()}),
            success: function (data) {
                console.info(data);
                $("#sheng").val(data.sheng);
                var str;
                $.ajax({
                    type: "GET",
                    url: "/zxsswms/wmscityinfo/getIdByName/" + data.sheng,
                    dataType: "JSON",
                    async: false,
                    success: function (data) {
                        $.ajax({
                            type: "GET",
                            url: "/zxsswms/wmscityinfo/selectProvice/" + data.citycode,
                            dataType: "JSON",
                            async: false,
                            success: function (data) {
                                //从服务器获取数据进行绑定
                                $.each(data, function (i, item) {
                                    str += "<option value=" + item.cityname + ">" + item.cityname + "</option>";
                                })
                                console.info(str);
                                //将数据添加到省份这个下拉框里面
                                $("#shi").append(str);
                                form.render('select');
                            },
                            error: function () {
                                alert("Error");
                            }
                        });
                    },
                    error: function () {
                        alert("Error");
                    }
                });
                $("#shi").val(data.shi);
                /*$("#sheng").append("<option value=" + data.sheng + ">" + data.sheng + "</option>");
                $("#shi").append("<option value=" + data.shi + ">" + data.shi + "</option>");*/
                zzpUtils.loadJsonDataToForm(data);
            }, error: function (xhr, textStatus) {
                console.log(textStatus);
                console.log(xhr)
            }
        });

        form.on("submit(editCustomer)", function (data) {
            console.log(zzpUtils.getFormJson($("#form1")));
            zzpUtils.confirm("是否确定修改", function (index) {
                zzpUtils.action({
                    url: "/wmsCustomerFiles/edit",
                    data: JSON.stringify(data.field),
                    success: function (data) {
                        setTimeout(function () {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                            top.layer.msg(data.title + "," + data.message);
                            //刷新父页面

                        }, 500);
                    }, error: function (xhr, textStatus) {
                        console.log(textStatus);
                        console.log(xhr)
                    }
                })
            })
            return false;

        });

        form.on('select(sheng)', function (data) {
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
            var sheng = $("#sheng").find("option:selected").attr("code");
            //判断省份这个下拉框选中的值是否为空
            if (sheng == "") {
                return;
            }
            $("#shi").html("");
            var str = "<option>==请选择===</option>";
            $.ajax({
                type: "GET",
                url: "/zxsswms/wmscityinfo/selectProvice/" + sheng,
                dataType: "JSON",
                async: false,
                success: function (data) {
                    //从服务器获取数据进行绑定
                    $.each(data, function (i, item) {
                        str += "<option value=" + item.cityname + ">" + item.cityname + "</option>";
                    })
                    console.info(str);
                    //将数据添加到省份这个下拉框里面
                    $("#shi").append(str);
                    console.info($("#shi").html());
                    form.render('select');
                },
                error: function () {
                    alert("Error");
                }
            });

        });

        //各种基于事件的操作，下面会有进一步介绍
    });
</script>
<!--<script>-->

<!--layui.use(['myform','zzpUtils','form','jquery'],function () {-->

<!--var form = layui.form,-->
<!--zzpUtils = layui.zzpUtils,-->
<!--$ = layui.jquery;-->

<!--//各种基于事件的操作，下面会有进一步介绍-->

<!--/* zzpUtils.select2({-->
<!--elem:".js-data-example-ajax",-->
<!--url:"/wmsgoodstype/getWmsGoodsTypeByHzId"-->
<!--});*/-->
<!--/*zzpUtils.selects({-->
<!--elem:"#sheng",-->
<!--url:"/wmscityinfo/selectProvice/1"-->
<!--});*/-->

<!--});-->
<!--</script>-->
</html>